.bui-textarea {
  --border-radius: var(
    --bui-textarea-border-radius,
    var(--bui-shape-radius-label)
  );
  --width: var(--bui-textarea-width, 100%);
  --bg-color: var(--bui-textarea-background-color, var(--bui-color-bg-default));
  --text-color: var(--bui-textarea-text-color, var(--bui-color-fg-subtle));
  --count-bg-color: var(--bg-color, var(--bui-color-bg-default));
  --count-text-color: var(
    --bui-textarea-count-color,
    var(--bui-color-fg-subtle)
  );
  --text-font-size: var(--bui-textarea-text-font-size, var(--bui-text-size-2));
  --count-font-size: var(
    --bui-textarea-count-font-size,
    var(--bui-title-size-3)
  );
  --content-padding: var(--bui-textarea-padding, 8px);
  --count-padding: var(--bui-textarea-count-padding, 0 4px);
  --placeholder-color: var(--bui-textarea-placeholder-color, #ced1d6);
  --placeholder-line-height: var(--bui-textarea-placeholder-line-height, 1.3);

  background: var(--bui-color-bg-default);
  border-radius: var(--border-radius);
  font-family: var(--bui-font-family);
  overflow: hidden;

  textarea {
    font-size: var(--text-font-size);
    color: var(--text-color);
    line-height: var(--bui-line-height);
  }

  .bui-mini-placeholder {
    color: var(--placeholder-color);
  }

  &-disabled {
    pointer-events: none;
  }

  // 隐藏支付宝自带字数标识
  .a-textarea-count-wrap {
    display: none;
  }
}

.bui-textarea-content {
  width: var(--width);
  resize: none;
  background-color: var(--bg-color);
  padding: var(--content-padding);
  border: none;
  outline: none;
  word-break: break-all;
  box-sizing: border-box;

  &::placeholder {
    color: var(--placeholder-color);
    line-height: var(--placeholder-line-height);
  }
}

.bui-textarea-count {
  background-color: var(--count-bg-color);
  color: var(--count-text-color);
  text-align: right;
  padding: var(--count-padding);
  font-size: var(--count-font-size);
}
